*{
    margin: 0;
    padding: 0;
}

html,body{
    width: 100%;
    height: 100%;
    background: black;
    animation: bgchange 200s linear infinite;
}

@keyframes bgchange{
    0%{
        background: black;
    }
    20%{
        background: skyblue;
    }
    50%{
        background: #273f74;
    }
    70%{
        background: royalblue;
    }
    100%{ background: black;}
}

.gamebox{
    position: relative;
    width: 50%;
    height: 100%;
    background: yellow;
    margin: 0 auto;
    box-shadow: 0px 0px 10px white;
    overflow: hidden;
}

#track{
    list-style: none;
    width: 100%;
    height: 200%;
    background: indianred;
    display: -webkit-box;
    position: absolute;
    animation: trackmove 4s linear;
}

@keyframes trackmove{
    from{
        top: -100%;
    }
    to{
        top: 0;
    }
}

#track li{
    -webkit-box-flex: 1;
    border-right: 5px dashed white;
}

#track li:nth-child(5){
    border: none;
}

#heroCar{
    width: 15%;
    height: 20%;
    background: yellow url(./赛车2.0.PNG) no-repeat center;
    background-size: 70%;
    position: absolute;
    left: 42%;
    bottom: 10%;
    box-shadow: 0px -200px 100px wheat;
}

.enemyCar{
    width: 15%;
    height: 20%;
    background:pink url(./赛车图/赛车3.png) no-repeat center;
    background-size: 65%;
    position: absolute;
}

#score{
    position: absolute;
    color: white;
    top: 10%;
    left: 15%;
    font-size: 30px;
    animation: fireDiv 1s infinite linear;
}
@keyframes fireDiv{
    0% {
        text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -5px 6px #fd3,
          -2px -5px 11px #f80, 2px -15px 18px #f20;
      }
      25% {
        text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -6px 8px #fd3,
          -3px -6px 11px #f80, 4px -16px 22px #f20;
      }
      50% {
        text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -7px 10px #fd3,
          -4px -7px 11px #f80, 4px -17px 25px #f20;
      }
      75% {
        text-shadow: 0 0 4px white, 2px -3px 6px #ff3, 2px -6px 8px #fd3,
          -3px -6px 11px #f80, 4px -16px 22px #f20;
      }
      100% {
        text-shadow: 0 0 4px white, 0 -2px 4px #ff3, 2px -5px 6px #fd3,
          -2px -5px 11px #f80, 2px -15px 18px #f20;
      }
}

#gameover{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 500px;
    height: 300px;
    display: none;
}

.cloud{
    position: absolute;
}

.c1{
    animation: c1move 20s linear infinite;
}

@keyframes c1move{
    form{
        left: -100%;
    }
    to{
        left: 100%;
    }
}

.c2{
    animation: c2move 200s linear infinite;
}

@keyframes c2move{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}

.c3{
    animation: c3move 50s linear infinite;
}

@keyframes c3move{
    form{
        left: -200%;
    }
    to{
        left: 200%;
    }
}